<!DOCTYPE HTML>
<html lang="de-DE">
<head>
    <title>Dokumentation &ndash; heise &bdquo;socialSharePrivacy&ldquo;&ndash;Plug-In</title>
    <meta charset="UTF-8" />
    <meta name="author" content="Hilko Holweg, Sebastian Hilbig, Nicolas Heiringhoff, Juergen Schmidt - Heise Zeitschriften Verlag GbmH &amp; Co. KG" />
    <meta name="description" content="Dokumentation und Einbindung des heise SocialSharePrivacy-Plug-Ins" />
    <style type="text/css">
        h1, h2, h3 {
            font: normal 24px/30px Georgia, Times, "Times New Roman", serif; 
            color: #666;
        }
        h2 {
            font-size: 22px;
            line-height: 28px;
        }
        h3 {
            font-size: 20px;
            line-height: 26px;
        }
        a {
            color: #039;
        }
        pre {
            background-color: #eee; 
            border: 1px solid #bbb;
            padding: 10px; 
            margin: 20px 0 0;
        }
        pre code {
            margin: 0; 
            padding: 0;
        }
        pre + p {
            margin-top: 5px;
        }
        ol li, p, td, th {
            font: normal 14px/20px "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif; 
            clear: both;
        }
        nav {
            display: block; 
            margin-bottom: 50px;
            border-bottom: 1px solid #333;
        }
        nav ol li,
        nav ol li a {
            font: bold 16px/24px "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
            color: #039;
            -moz-transition: all .5s ease-in;
            -webkit-transition: all .5s ease-in;
            transition: all .5s ease-in;
        }
        nav ol li a:hover {
            text-decoration: none; 
            color: #333;
        }
        ol#structure li ol {
            list-style-type: none; 
            padding: 0;
        }
        ol#structure li ol#fb_app_id_step_by_step {
            list-style-type: decimal;
            padding-left: 20px;
        }
        ol#structure li ol#fb_app_id_step_by_step li {
            margin-bottom: 16px;
        }
        ol#structure li ol li {
            margin-bottom: 30px; 
        }
        ol#structure li ol li table {
            border: 1px solid #333;
            width: 100%;
            display: table;
            margin: 20px 0;
        }
        ol#structure li ol.changelog li {
            margin: 5px 0;
        }
        ol#structure li ol.changelog li pre {
            margin: 5px 0 20px;
        }
        table caption {
            text-align: left; 
            font-size: 18px; 
            font-weight: bold; 
            text-indent: 5px; 
        }
        table th {
            text-align: left; 
            font-style: italic; 
            background-color: #333;
            color: #fff;
        }
        table th, 
        table td {
            padding: 2px 4px; 
            vertical-align: top; 
        }
        table tr:hover td {
            background-color: #eee;
        }
    </style>
</head>
<body>
    <h1>jQuery Plug-In socialshareprivacy &ndash; Dokumentation</h1>

    <h3>Download des jQuery-Plug-Ins:</h3>
    <p>
        <a href="http://www.heise.de/extras/socialshareprivacy/jquery.socialshareprivacy.zip">jquery.socialshareprivacy.zip</a><br />
        <a href="http://www.heise.de/extras/socialshareprivacy/jquery.socialshareprivacy.tar.gz">jquery.socialshareprivacy.tar.gz</a>
    </p>
        
    <nav>
        <h2>Navigation</h2>
        <ol>
            <li><a href="#changelog">Change-Log</a></li>
            <li><a href="#files">Dateien</a></li>
            <li><a href="#pre">Voraussetzungen und Einschränkungen</a></li>
            <li><a href="#dimensions">Ausmaße</a></li>
            <li>Einfache Einbindung
                <ol>
                    <li><a href="#merge">Quelltext</a></li>
                    <li><a href="#explanation">Erklärung des Codes</a></li>
                </ol>
            </li>
            <li><a href="#options">Optionen</a>
                <ol>
                    <li><a href="#options_general">Allgemein</a></li>
                    <li><a href="#options_facebook">Facebook</a></li>
                    <li><a href="#options_twitter">Twitter</a></li>
                    <li><a href="#options_gplus">Google+</a></li>
                </ol>
            </li>
            <li><a href="#examples">Beispiel-Einbindungen</a>
                <ol>
                    <li><a href="#only_fb">Nur Facebook einbinden</a></li>
                    <li><a href="#no_perma">Keine Option zum dauerhaften Aktivieren anbieten</a></li>
                    <li><a href="#only_gplus_css_path">Nur Google+ anbieten und eigenen Pfad für die CSS-Datei angeben.</a></li>
                </ol>
            </li>
            <li><a href="#url">URL</a></li>
            <li><a href="#perma_option">Einstellung merken</a></li>
            <li><a href="#licence">Lizenz</a></li>
            <li><a href="#logo">Logo</a></li>
        </ol>
    </nav>
    
    <ol id="structure">
        <li>
            <h2 id="changelog">Change-Log</h2>
            <ol class="changelog">
                <li>
                    <h3 id="v1-3">Version 1.3</h3>
                    <ul>
                        <li>
                            Erste Fassung, die auch mehrmals auf einer Seite verwendet werden kann. Damit in den verschiedenen Instanzen unterschiedliche URIs verwendet werden können, wird der per Option <code>uri</code> gesetzen Funktion ein Kontext-DOM-Knoten übergeben, über den man eine URI ermitteln kann. Beispiele für die Verwendung haben wir in der Dokumentation bei den <a href="#examples">Beispiel-Einbindungen</a> ergänzt.
                        </li>
                        <li>
                            Korrektur für IE &lt; 9: Das per <code>css_path</code> angegebene Stylesheet wurde mit jQuery-Versionen != 1.4.2 nicht eingebaut.
                        </li>
                    </ul>
                </li>
                <li>
                    <h3 id="v1-2">Version 1.2</h3>
                    <ul>
                        <li>
                            JS: Facebook App-ID entfernt, da diese nicht mehr nötig ist, um den Like/Recommend-Button zu nutzen.
                        </li>
                    </ul>
                </li>
                <li>
                    <h3 id="v1-1">Version 1.1</h3>
                    <ul>
                        <li>
                            CSS: Bei diversen Elementen haben wir mehr Angaben hinzugefügt, um die Nacharbeiten, bei der Integration in eigene Seiten, geringer zu halten. Vor allem haben wir <code>margin</code>-, <code>padding</code>-, <code>width</code>- und <code>height</code>-Angaben hinzugefügt.
                        </li>
                        <li>
                            Die Doku wurde um einen Beispiele- und diesen Change-Log-Bereich erweitert. 
                        </li>
                        <li>
                            Das Plug-In wurde inhaltlich etwas umgestellt und einige Code-Abkürzungen vorgenommen.
                        </li>
                        <li>
                            JS-Bug Korrektur: Es gab einen Fehler, wenn es in der Seite ein <code>canonical</code>-Attribut gab, das aber einen leeren Wert hatte.
                        </li>
                        <li>
                            JS-Bug Korrektur: Bei den Optionen von Google+ gab es eine Angabe, die später im Script nie abgefragt wurde.
                        </li>
                        <li>
                            JS-Bug Korrektur: Die Perma-Option von Google+ wurde nur angezeigt, wenn auch die Perma-Option von Twitter aktiviert war.
                        </li>
                        <li>
                            Twitter: Wenn aktiviert war das iFrame zu groß und überlagerte darunter liegende Links. <code>&lt;iframe ...style="width:130px; height:25px;">&lt;/iframe></code> ergänzt.
                        </li>
                        <li>Allgemein: Wenn die Option css_path leer ist, wird kein &lt;link>-Tag mit leerem href in die Seite eingebaut.</li>
                        <li>Allgemein: Die von den Buttons verwendete URI kann jetzt über die Option <code>uri</code> gesteuert werden. Es ist sowohl ein fester Wert, wie auch eine Function möglich. Default ist die enthaltene Funktion <code>getURI</code></li>
                        <li><strong>Neue Features:</strong>
                            <ul>
                                <li>Facebook: Die Beschriftungsvarianten des Buttons "Empfehlen" und "Gefällt mir" kann über die neue Option "action" gesteuert werden. Werte sind "<code>recommend</code>" (default) und "<code>like</code>".</li>
                                <li>Twitter: Parameter "<code>language</code>" (default "<code>en</code>") jetzt auch für Twitter.</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <h3 id="v1-0">Version 1.0</h3>
                    <ul>
                        <li>Erstes öffentliches Release</li>
                    </ul>
                </li>
            </ol>
        </li>

        <li>
            <h2 id="files">Dateien</h2>
            <p>Zu unserem Plug-In gehören folgende Dateien:</p>
            <ul>
                <li>index.html (die Doku, die Sie gerade lesen)</li>
                <li>dimensions.gif (Infografik für diese Doku)</li>
                <li>2-klick-logo_min.jpg (Logo klein)</li>
                <li>jquery.socialshareprivacy.js</li>
                <li>jquery.socialshareprivacy.min.js</li>
                <li>socialshareprivacy/socialshareprivacy.css</li>
                <li>socialshareprivacy/images/dummy_facebook.png</li>
                <li>socialshareprivacy/images/dummy_facebook_en.png</li>
                <li>socialshareprivacy/images/dummy_gplus.png</li>
                <li>socialshareprivacy/images/dummy_twitter.png</li>
                <li>socialshareprivacy/images/settings.png</li>
                <li>socialshareprivacy/images/socialshareprivacy_info.png</li>
                <li>socialshareprivacy/images/socialshareprivacy_on_off.png</li>
                <li>socialshareprivacy/images/2-klick-logo.jpg</li>
            </ul>
        </li>
        <li>
            <h2 id="pre">Voraussetzungen und Einschränkungen</h2>
            <p>
                Technische Voraussetzungen sind jQuery und aktiviertes JavaScript im Browser. Bei uns getestet mit jQuery 1.4.<br />
                Das Plug-In kann derzeit innerhalb einer HTML-Seite nur einmal verwendet werden.
            </p>
            <p>
                Wenn Sie Vorschläge zur Verbesserung haben, wenden Sie sich gerne per Mail an <a href="mailto:2klick@heise.de?subject=Vorschlag%20zum%20Plug-In">2klick@heise.de</a>.
            </p>
            <p>
                Das dauerhafte Aktivieren der Services funktioniert im Internet Explorer erst ab Version 8, da die Vorgängerversionen kein JSON unterstützen. Daher fehlt im IE &lt;= 7 diese Funktion. Der Rest des Plug-Ins ist davon nicht betroffen.
            </p>
            <p>
                <del datetime="2011-10-04" cite="http://www.heise.de/extras/socialshareprivacy/#v1-2">Für Facebook ist zwingend eine eigene App-ID notwendig, siehe dazu <a href="#fb_app-id">Hinweis zur Facebook App-ID</a>.</del>
            </p>
        </li>
        <li>
            <h2 id="dimensions">Ausmaße</h2>
            <img src="dimensions.gif" width="600" height="284" alt="Ausmaße des Plug-Ins" />
            <p>
                Das Plug-In benötigt insgesamt etwa 600 Pixel in der Breite (wenn alle Services aktiviert sind) und ca. 290 Pixel in der Höhe, wobei dies natürlich auch von der Länge der angegebenen MouseOver-Texte abhängt.
            </p>
        <li>
            <ol>
                <li>
                    <h2 id="merge">Einbindung</h2>
<pre>
<code>&lt;head&gt;
  &hellip;
  &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="jquery.socialshareprivacy.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    jQuery(document).ready(function($){
      if($('#socialshareprivacy').length > 0){
        $('#socialshareprivacy').socialSharePrivacy(); 
      }
    });
  &lt;/script&gt;
  &hellip;
&lt;/head&gt;
&lt;body&gt;
  &hellip;
  &lt;div id="socialshareprivacy"&gt;&lt;/div&gt;
  &hellip;
&lt;/body&gt;</code>
</pre>
                </li>
                <li>
                    <h3 id="explanation">Erklärung des Codes</h3>

<pre>
<code>&lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt; 
&lt;script type="text/javascript" src="jquery.socialshareprivacy.js"&gt;&lt;/script&gt;</code>
</pre>
                    <p>
                        Die erste Zeile bindet das JavaScript-Framework &bdquo;JQuery&ldquo; (<a href="http://jquery.com/">http://jquery.com/</a>) ein, die zweite Zeile unser Plug-In. jQuery liegt unserem Paket <strong>nicht</strong> bei, Sie müssen es erst noch selbst von der eben genannten Website herunterladen.
                    </p>

<pre>
<code>&lt;script type="text/javascript"&gt;
  jQuery(document).ready(function($){
    if($('#socialshareprivacy').length > 0){
      $('#socialshareprivacy').socialSharePrivacy(); 
    }
  });
&lt;/script&gt;</code>
</pre>
                    <p>
                        In diesem <code>&lt;script&gt;</code>-Block wird die Plug-In Funktion an ein frei wählbares, leeres HTML-Element in der Seite gehängt, in diesem Fall das Element mit der <code>id</code> <em>socialshareprivacy</em>.<br />
                        Damit das Anhängen des Plug-Ins nur dann geschieht, wenn das Element auch wirklich vorhanden ist, haben wir noch die Kontrollfunktion <code>if</code>, die das Anhängen umschließt und die nötige Bedingung prüft.
                    </p>

<pre>
<code>&lt;body&gt;
  &hellip;
  &lt;div id="socialshareprivacy"&gt;&lt;/div&gt;
  &hellip;
&lt;/body&gt;</code>
</pre>
                    <p>
                        Irgendwo im <code>&lt;body&gt;</code>-Bereich der Website platziert man das leere HTML-Element mit der gewünschten <code>id</code>, die identisch zur verwendeten <code>id</code> im vorhergehenden <code>&lt;script&gt;</code>-Block sein muss.
                    </p>
                </li>
            </ol>
        </li>
        <li>
            <h2 id="options">Optionen</h2>
            <p>
                Zur Einbindung stehen diverse Optionen zur Verfügung. Im Folgenden sind erstmal die allgemeinen Optionen aufgeführt und anschließend die Optionen nach den einzelnen Services (Facebook, Twitter, Google+) aufgelistet.<br />
                Beispiel für einen Aufruf mit Optionen:
            </p>
<pre>
<code>$('#socialshareprivacy').socialSharePrivacy({
  services : {
    facebook : {
      'perma_option': 'off'
    }, 
    twitter : {
        'status' : 'off'
    },
    gplus : {
      'display_name' : 'Google Plus'
    }
  },
  'cookie_domain' : 'heise.de'
});</code>
</pre>
            <ol>
                <li id="options_general">
                    <table summary="Eine Auflistung aller allgemeinen Optionen des socialSharePrivacy-Plug-Ins">
                        <caption>allgemeine Optionen</caption>
                        <thead>
                            <tr>
                                <th>Option</th>
                                <th>Standardwert</th>
                                <th>Beschreibung</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>info_link</td>
                                <td>http://www.heise.de/ct/artikel/2-Klicks-fuer-mehr-Datenschutz-1333879.html</td>
                                <td>Link zu detaillierter Datenschutz-Info, in unserem Fall ein heise-Artikel.</td>
                            </tr>
                            <tr>
                                <td>txt_help</td>
                                <td><em>Text</em></td>
                                <td>MouseOver-Text des <em>i</em>-Icons</td>
                            </tr>
                            <tr>
                                <td>settings_perma</td>
                                <td>Dauerhaft aktivieren und Daten&uuml;ber&shy;tragung zustimmen:</td>
                                <td>Überschrift des Einstellungsmenüs</td>
                            </tr>
                            <tr>
                                <td>cookie_path</td>
                                <td>/</td>
                                <td>Pfad der Gültigkeit des Cookies</td>
                            </tr>
                            <tr>
                                <td>cookie_domain</td>
                                <td><code>document.location.host</code></td>
                                <td>Domain für die das Cookie gültig ist</td>
                            </tr>
                            <tr>
                                <td>cookie_expires</td>
                                <td>365</td>
                                <td>Dauer die das Cookie gültig ist in Tagen</td>
                            </tr>
                            <tr>
                                <td>css_path</td>
                                <td>socialshareprivacy/socialshareprivacy.css</td>
                                <td>Pfad zur CSS-Datei, wenn leer wird kein Stylesheet eingebaut</td>
                            </tr>
                            <tr>
                                <td>uri</td>
                                <td>getURI</td>
                                <td>Die URI, die von den Buttons weitergegeben werden soll. Möglich ist ein fester Wert (z.B. <code>"http://www.heise.de"</code>) oder eine Funktion (siehe <code>function getURI()</code> im Plug-In-Quellcode)</td>
                            </tr>
                        </tbody>
                    </table>
                </li>
                <li id="options_facebook">
                    <table summary="Eine Auflistung aller Optionen für Facebook des socialSharePrivacy-Plug-Ins">
                        <caption>Optionen: Facebook</caption>
                        <thead>
                            <tr>
                                <th>Option</th>
                                <th>Standardwert</th>
                                <th>Beschreibung</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>status</td>
                                <td>on</td>
                                <td>Der User hat Facebook zur Auswahl</td>
                            </tr>
                            <tr>
                                <td><del datetime="2011-10-04" cite="http://www.heise.de/extras/socialshareprivacy/#v1-2">app_id</del></td>
                                <td><em>entfallen (seit Version 1.2)</em></td>
                                <td><del datetime="2011-10-04" cite="http://www.heise.de/extras/socialshareprivacy/#v1-2">Facebook App-ID; Sie ist nötig um den <em>Empfehlen</em>-Button von Facebook nutzen zu können. Ist sie nicht angegeben, wird dem User Facebook trotz <code>'status' : 'on'</code> <strong>nicht</strong> angeboten. In der JavaScript-Konsole wird dem Entwickler ein entsprechender Hinweis ausgegeben.</del></td>
                            </tr>
                            <tr>
                                <td>dummy_img</td>
                                <td>socialshareprivacy/images/dummy_facebook.png</td>
                                <td>Pfad zur statischen Grafik</td>
                            </tr>
                            <tr>
                                <td>txt_info</td>
                                <td><em>Text</em></td>
                                <td>MouseOver-Text des Empfehlen-Buttons</td>
                            </tr>
                            <tr>
                                <td>txt_fb_off</td>
                                <td>nicht mit Facebook verbunden</td>
                                <td>Text-Entsprechung der Schalter-Grafik im ausgeschalteten Zustand, in der Regel nicht sichtbar für den User</td>
                            </tr>
                            <tr>
                                <td>txt_fb_on</td>
                                <td>mit Facebook verbunden</td>
                                <td>Text-Entsprechung der Schalter-Grafik im eingeschalteten Zustand, in der Regel nicht sichtbar für den User</td>
                            </tr>
                            <tr>
                                <td>perma_option</td>
                                <td>on</td>
                                <td>Der User hat die Option sich Facebook dauerhaft einblenden zu lassen (mittels Cookie)</td>
                            </tr>
                            <tr>
                                <td>display_name</td>
                                <td>Facebook</td>
                                <td>Schreibweise des Service in den Optionen</td>
                            </tr>
                            <tr>
                                <td>referrer_track</td>
                                <td>&nbsp;</td>
                                <td>Wird ans Ende der URL gehängt, kann zum Tracken des Referrers genutzt werden</td>
                            </tr>
                            <tr>
                                <td>language</td>
                                <td>de_DE</td>
                                <td>Spracheinstellung</td>
                            </tr>
                            <tr>
                                <td>action</td>
                                <td>recommend</td>
                                <td>Beschriftung des Buttons: Empfehlen (<code>recommend</code>) oder Gefällt mir (<code>like</code>)</td>
                            </tr>
                        </tbody>
                    </table>
                </li>
                <li id="options_twitter">
                    <table summary="Eine Auflistung aller Optionen für Twitter des socialSharePrivacy-Plug-Ins">
                        <caption>Optionen: Twitter</caption>
                        <thead>
                            <tr>
                                <th>Option</th>
                                <th>Standardwert</th>
                                <th>Beschreibung</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>status</td>
                                <td>on</td>
                                <td>Der User hat Twitter zur Auswahl</td>
                            </tr>
                            <tr>
                                <td>dummy_img</td>
                                <td>socialshareprivacy/images/dummy_twitter.png</td>
                                <td>Pfad zur statischen Grafik</td>
                            </tr>
                            <tr>
                                <td>txt_info</td>
                                <td><em>Text</em></td>
                                <td>MouseOver-Text des Tweet-Buttons</td>
                            </tr>
                            <tr>
                                <td>txt_twitter_off</td>
                                <td>nicht mit Twitter verbunden</td>
                                <td>Text-Entsprechung der Schalter-Grafik im ausgeschalteten Zustand, in der Regel nicht sichtbar für den User</td>
                            </tr>
                            <tr>
                                <td>txt_twitter_on</td>
                                <td>mit Twitter verbunden</td>
                                <td>Text-Entsprechung der Schalter-Grafik im eingeschalteten Zustand, in der Regel nicht sichtbar für den User</td>
                            </tr>
                            <tr>
                                <td>perma_option</td>
                                <td>on</td>
                                <td>Der User hat die Option sich Twitter dauerhaft einblenden zu lassen (mittels Cookie)</td>
                            </tr>
                            <tr>
                                <td>display_name</td>
                                <td>Twitter</td>
                                <td>Schreibweise des Service in den Optionen</td>
                            </tr>
                            <tr>
                                <td>referrer_track</td>
                                <td>&nbsp;</td>
                                <td>Wird ans Ende der URL gehängt, kann zum Tracken des Referrers genutzt werden</td>
                            </tr>
                            <tr>
                                <td>tweet_text</td>
                                <td><code>getTweetText</code></td>
                                <td>
                                    Die Funktion prüft ob es die Meta-Angabe <code>DC.title</code> gibt und verwendet diese. Gibt es außerdem noch <code>DC.creator</code> wird diese etwas abgesetzt (&quot; - &quot;) hinten angehängt. Ist <code>DC.title</code> nicht vorhanden wird das &lt;title&gt;-Tag der Seite verwendet.<br />
                                    Diese Option kann mit einem eigenen Text (<code>typeof == string</code>) überschrieben werden oder mit einer eigenen Funktion (<code>typeof == function</code>), die den Text generiert.<br />
                                    Der übergebene Texte wird immer auf 120 Zeichen gekürzt und beim letzten Leerzeichen mit &hellip; ersetzt.
                                </td>
                            </tr>
                            <tr>
                                <td>language</td>
                                <td>en</td>
                                <td>Spracheinstellung (Default: "<code>en</code>" ja, uns gefällt Tweet besser als Twittern)</td>
                            </tr>
                        </tbody>
                    </table>
                </li>
                <li id="options_gplus">
                    <table summary="Eine Auflistung aller Optionen für Google+ des socialSharePrivacy-Plug-Ins">
                        <caption>Optionen: Google+</caption>
                        <thead>
                            <tr>
                                <th>Option</th>
                                <th>Standardwert</th>
                                <th>Beschreibung</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>status</td>
                                <td>on</td>
                                <td>Der User hat Google+ zur Auswahl</td>
                            </tr>
                            <tr>
                                <td>dummy_img</td>
                                <td>socialshareprivacy/images/dummy_gplus.png</td>
                                <td>Pfad zur statischen Grafik</td>
                            </tr>
                            <tr>
                                <td>txt_info</td>
                                <td><em>Text</em></td>
                                <td>MouseOver-Text des &bdquo;+1&ldquo;-Buttons</td>
                            </tr>
                            <tr>
                                <td>txt_gplus_off</td>
                                <td>nicht mit Google+ verbunden</td>
                                <td>Text-Entsprechung der Schalter-Grafik im ausgeschalteten Zustand, in der Regel nicht sichtbar für den User</td>
                            </tr>
                            <tr>
                                <td>txt_gplus_on</td>
                                <td>mit Google+ verbunden</td>
                                <td>Text-Entsprechung der Schalter-Grafik im eingeschalteten Zustand, in der Regel nicht sichtbar für den User</td>
                            </tr>
                            <tr>
                                <td>perma_option</td>
                                <td>on</td>
                                <td>Der User hat die Option sich Google+ dauerhaft einblenden zu lassen (mittels Cookie)</td>
                            </tr>
                            <tr>
                                <td>display_name</td>
                                <td>Google+</td>
                                <td>Schreibweise des Service in den Optionen</td>
                            </tr>
                            <tr>
                                <td>referrer_track</td>
                                <td>&nbsp;</td>
                                <td>Wird ans Ende der URL gehängt, kann zum Tracken des Referrers genutzt werden</td>
                            </tr>
                            <tr>
                                <td>language</td>
                                <td>de</td>
                                <td>Spracheinstellung</td>
                            </tr>
                        </tbody>
                    </table>
                </li>
            </ol>
        </li>
        <li>
            <h2 id="examples">Beispiel-Einbindungen</h2>
            <p>
                Im Folgenden sehen Sie ein paar beispielhafte Einbindungen von gängigen Konfigurationen.
            </p>
            <ul>
                <li>
                    <h3 id="only_fb">Nur Facebook einbinden</h3>
<pre>
<code>$('#socialshareprivacy').socialSharePrivacy({
    services : {
        twitter : {
            'status' : 'off'
        },
        gplus : {
            'status' : 'off'
        }
    }
});</code>
</pre>
                </li>
                <li>
                    <h3 id="no_perma">Keine Option zum dauerhaften Aktivieren anbieten</h3>
<pre>
<code>$('#socialshareprivacy').socialSharePrivacy({
    services : {
        facebook : {
            'perma_option'  : 'off'
        }, 
        twitter : {
            'perma_option' : 'off'
        },
        gplus : {
            'perma_option' : 'off'
        }
    }
});</code>
</pre>
                </li>
                <li>
                    <h3 id="only_gplus_css_path">Nur Google+ anbieten und eigenen Pfad für die CSS-Datei angeben.</h3>
<pre>
<code>$('#socialshareprivacy').socialSharePrivacy({
    services : {
        facebook : {
            'status' : 'off'
        }, 
        twitter : {
            'status' : 'off'
        }
    },
    'css_path' : '/style/plugins/socialshareprivacy.css'
});</code>
</pre>
                </li>
                <li>
                    <h3>Mehrere 2-Klick-Buttonleisten auf einer Seite</h3>
                    <h4>Variante 1: Ein Aufruf des Plug-Ins mit einem entsprechenden Selektor</h4>
<pre>
&lt;div class="anriss">
    &lt;h3>&lt;a href="http://www.heise.de">heise&lt;/a>&lt;/h3>
    &lt;p>lorem ipsum&lt;/p>
    &lt;div class="social">&lt;/div>
&lt;/div>

&lt;div class="anriss">
    &lt;h3>&lt;a href="http://www.heise.de/security/">heise security&lt;/a>&lt;/h3>
    &lt;p>dolor sit amet&lt;/p>
    &lt;div class="social">&lt;/div>
&lt;/div>

&lt;script>
$(".social").socialSharePrivacy({
    uri : function(context) {
        return $(context).parents(".anriss").find("h3 a").attr("href");
    }
});
&lt;/script>
</pre>
                            <h4>Variante 2: Mehrfacher Aufruf des Plug-Ins</h4>
<pre>
&lt;div>
    &lt;h3>&lt;a href="http://www.heise.de">heise&lt;/a>&lt;/h3>
    &lt;p>lorem ipsum&lt;/p>
    &lt;div id="one">&lt;/div>
&lt;/div>
&lt;script>
$("#one").socialSharePrivacy({
    uri : "http://www.heise.de"
});
&lt;/script>

&lt;div>
    &lt;h3>&lt;a href="http://www.heise.de/security/">heise security&lt;/a>&lt;/h3>
    &lt;p>dolor sit amet&lt;/p>
    &lt;div id="two">&lt;/div>
&lt;/div>
&lt;script>
$("#two").socialSharePrivacy({
    uri : "http://www.heise.de/security/"
});
&lt;/script>
</pre>

                </li>
            </ul>
        </li>
        <li>
            <h2 id="url">URL</h2>
            <p>
                Die URL, die den Services übergeben wird, kann über eine Option gesteuert werden.<br />Standardmäßig wird eine Funktion innerhalb des Plug-Ins verwendet, die die URL der aktuellen Seite aus <code>document.location.href</code> ermittelt, ist jedoch eine kanonische URL hinterlegt (<code>&lt;link rel="canonical"&gt;</code>), wird diese genommen.
            </p>
        </li>
        <li>
            <h2 id="perma_option">Einstellungen merken</h2>
            <p>
                Bevor das Cookie abgefragt wird, wie die Einstellungen des Users sind, wird erstmal geprüft, wie das Plug-In konfiguriert ist. Ist das Plug-In eventuell nachträglich umgestellt worden hat der User dadurch keine Nachteile.<br />
                Wurde für alle Services die Merken-Funktion ausgeschaltet (<code>'perma_option' : 'off'</code>) wird auch das Einstellungsmenü nicht mehr angezeigt.
            </p>
        </li>
        <li>
            <h2 id="licence">Lizenz</h2>
            <p>
                Dieses Plug-In ist unter der MIT License (<a href="http://www.opensource.org/licenses/mit-license.php">http://www.opensource.org/licenses/mit-license.php</a>) veröffentlicht und darf gerne für private, wie auch kommerzielle Zwecke genutzt werden.
            </p>
        </li>
        <li>
            <h2 id="logo">Logo</h2>
            <p>
                Unserem Plug-In liegt auch das von uns verwendete Logo bei, das Sie gerne zur Bewerbung dieser Aktion verwenden dürfen.
                <a href="socialshareprivacy/images/2-klick-logo.jpg"><img src="2-klick-logo_min.jpg" width="150" height="150" alt="Logo 2 Klicks für mehr Datenschutz" style="float: left;" /></a>
            </p>
        </li>
    </ol>
</body>
</html>
